<template>
  <view>
    <u-modal :show="isModelShow"
             @confirm="onModelConfirm"
             showCancelButton
             @cancel="isModelShow=false"
             title="提示"
             content="确定执行吗，该操作不可逆"
             ref="uModal" ></u-modal>
    <view class="justifyEnd scopeButtons">
      <view v-if="orderStatus==='State'">
        <view class="button" @tap="onCancelShoppingCart">
          取消订单
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import toast from '@/utils/toast'
import {CancelShoppingCart} from "@/api/shopping";
import {ref, toRefs} from "vue";

let isModelShow = ref(false);
const props = defineProps({
  orderStatus: {
    type: String,
    default: () => '',
  },
  orderId: String,
})

let {orderStatus,orderId} = toRefs(props);
const emit = defineEmits(['refreshList'])
const onCancelShoppingCart = () => {
  isModelShow.value = true;
}

const onModelConfirm = () => {
  CancelShoppingCart(orderId.value).then(res=>{
    isModelShow.value = false;
    emit('refreshList');
    toast.$toast()
  }).catch(()=>{
    isModelShow.value = false;
  })
}
</script>

<style lang="scss" scoped>
.scopeButtons{
  padding: 0 32rpx 32rpx;
.button{
  width: 112rpx;
  height: 44rpx;
  border-radius: 22rpx;
  border: 2rpx solid #9D9D9D;
  font-size: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #666666;
}
}
</style>
